<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="./css/common.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        li {
            height: 50px;
            margin-top: 1px;
        }
        
        input {
            height: 35px;
            flex-grow: 1;
            border: 1px solid #ebebeb;
            margin-left: 15px;
            text-indent: 10px;
        }
        
        button {
            margin-top: 50px;
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>

<body>
    <header>
        <a href="./list.html">列表</a>
        <a href="./add.html">添加</a>
    </header>

    <div id="box" class="mt-5">
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>头像地址:</span> <input value="avatarUrl" type="text" placeholder="选填">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>英雄名字:</span> <input value="name" type="text" placeholder="必填">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>英雄职业:</span> <input value="occupation" type="text" placeholder="选填">
        </li>
        <li class="flex jc-sb aic f18 bg-fff pl-15 pr-5">
            <span>英雄技能: </span><input value="skill" type="text" placeholder="选填">
        </li>
    </div>

    <p class="fcc"> <button onclick="obj.update();" class="btn">提交</button></p>

    <script>
        var search = location.search;
        var _id = search.replace(/^\?_id=(.*)/, '$1');
        var obj = {
            getDetail: function() {
                var self = this;
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8888/getDetail',
                    data: {
                        _id: _id
                    },
                    dataType: "json",
                    success: function(res) {
                        if (res.code === 666) {
                            self.render(res.data);
                        } else {
                            alert(res.msg);
                        }
                    },
                    error: function() {
                        // todo
                    }
                })
            },

            render: function(obj) {
                var $inputs = $('input');
                // $inputs[0].value = obj.headUrl;
                $inputs[1].value = obj.name;
                $inputs[2].value = obj.age;
            },


            update: function() {
                var $inputs = $('input');
                var data = {
                    _id: _id,
                    name: $inputs[1].value,
                    age: Number($inputs[2].value) || 0
                }

                $.ajax({
                    type: 'get',
                    url: 'http://localhost:8888/update',
                    data: data,
                    dataType: 'json',
                    success: function(res) {
                        if (res.code === 666) {
                            alert('修改成功');
                            location.href = './list.html';
                        } else {
                            alert(res.msg);
                        }
                    },
                    error: function() {
                        // todo
                    }
                })
            }
        }

        obj.getDetail();
    </script>

</body>

</html>